<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="div1">
    <model1></model1>
    <model1></model1>
    <model1></model1>
  </div>
  <hr/>
  <div id="div2">
    <model1></model1>
    <model1></model1>
    <model1></model1>
  </div>
</body>
  <script>
        Vue.component("model1",{
          template: "<div><h1>{{title}}</h1><button type='button' @click='btn'>点我</button></div>",
          data: function (){
            return{
              title:"hello world"
            }
          },
          methods:{
            btn: function (){
              alert("全局组件!");
            }
          }
        });

        new Vue({
          el: '#div1'
        });
        new Vue({
          el: '#div2'
        });
  </script>
</html>